<template>
  <div id="app">
    <transition :name="transitionName">
      <router-view/>
    </transition>
    <main-tab-bar v-show="$route.meta.showFooter"/>
  </div>
</template>

<script>
import MainTabBar from 'components/content/MainTabBar'
export default {
  name: 'App',
  components:{
    MainTabBar
  },
  data() {
    return{
      transitionName: 'slide-left'
    }
  },
  watch: {
    $route(to, from){
      // 有主级到次级
      if(to.meta.index > from.meta.index){
        this.transitionName = 'slide-left'//向走滑动
      }else if(to.meta.index < from.meta.index) {
        // 由次级到主级
        this.transitionName = 'slide-right'
      }else{
        this.transitionName = '' //同级无过渡效果
      }
    }
  }
 
}
</script>

<style>
@import url(assets/css/base.css);
#app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
}
.router-view{
    
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active{
  height: 100%;
  will-change: transform;
  transition: all 500ms;
  position: absolute;
  backface-visibility: hidden;
}
.slide-right-enter{
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active{
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-enter{
    opacity: 0;
    transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active{
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
}
</style>
